<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide " v-for="item in sliders">
                <a href="javascript:;"><img class="swiper-lazy" :src="item.imgUrl" /></a>
                <div class="swiper-lazy-preloader" v-if="options.lazyLoading"></div>
            </div>
        </div>
        <!-- 以下控件元素均为可选（使用具名slot来确定并应用一些操作控件元素） -->
        <slot name="pagination"></slot>
        <slot name="button-prev"></slot>
        <slot name="button-next"></slot>
    </div>
</template>
<script type="text/javascript">
import '../scss/swiper.scss';
import Swiper from 'swiper';
export default {
    data() {
        return {
            swiper: null
        }
    },
    props: {
        options: {
            type: Object,
            default() {
                return {
                    autoplay: 2000
                }
            }
        },
        sliders: {
            type: Array
        }
    },
    beforeCreate() {
        console.log("beforeCreate")
    },
    created() {
        console.log("created")
    },
    beforeMount() {
        console.log("beforeMount")
    },
    beforeUpdate() {
        console.log("beforeUpdate－swiper")
    },
    activated() {
        this.swiper = new Swiper(this.$el, this.options)
        console.log('activated0',this.swiper)
    },
    mounted() {
        this.swiper = new Swiper(this.$el, this.options)
        console.log('mounted0',this.swiper)
    },
    updated() {
        console.log("uodated－swiper")
        this.swiper.update()
    },
    beforeDestroy() {
        console.log("beforeDestroy")
        if (!!this.swiper) {
            this.swiper.destroy()
        }
    },
    destroyed() {
        console.log("destroyed")
    },
    deactivated() {
        this.swiper.destroy()
        console.log('deactivated0',this.swiper)
    }

}
</script>
